<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item>
        <el-input
          v-model="formInline.codingName"
          placeholder="请输入任务编号/名称"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="formInline.relevanceExplain"
          placeholder="请输入关联计划名称/编号"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="formInline.productName"
          placeholder="请输入产品名称"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="formInline.targetForm"
          placeholder="请选择状态"
          clearable
        >
          <el-option label="待排产" value="10" />
          <el-option label="物料管理" value="物料管理" />
          <el-option label="过程检验" value="过程检验" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <div class="block">
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="~"
            start-placeholder="计划开始时间"
            end-placeholder="计划结束时间"
            :size="size"
          />
        </div>
      </el-form-item>
      <el-form-item>
        <div class="block">
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="~"
            start-placeholder="实际开始时间"
            end-placeholder="实际结束时间"
            :size="size"
          />
        </div>
      </el-form-item>
      <el-form-item>
        <div class="block">
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="~"
            start-placeholder="请选择需求日期"
            end-placeholder="请选择需求日期"
            :size="size"
          />
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="hendleSerch">查询</el-button>
      </el-form-item>
    </el-form>
    <el-button link size="small" @click="Start(scope.$index)"> 开始 </el-button>
    <el-button link size="small" @click="Cancel(scope.$index)">
      取消
    </el-button>
    <el-button link size="small" @click="Finish(scope.$index)">
      结束
    </el-button>
    <el-button link size="small" @click="Withdraw(scope.$index)">
      撤回
    </el-button>
    <el-button type="primary" @click="down">导出</el-button>
    <el-table
      ref="multipleTableRef"
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column
        property="workOrderNumber"
        label="工单编号"
        width="120"
        fixed="left"
      />
      <el-table-column
        property="workOrderName"
        label="工单名称"
        width="120"
        fixed="left"
      />
      <el-table-column
        property="workOrderSchedule"
        label="工单进度"
        width="120"
        fixed="left"
      />
      <el-table-column
        property="relevanceExplain"
        label="关联计划"
        width="120"
      />
      <el-table-column property="productName" label="产品名称" width="120" />
      <el-table-column property="productNumber" label="产品编号" width="120" />
      <el-table-column property="specification" label="规格型号" width="120" />
      <el-table-column property="productType" label="产品类型" width="120" />
      <el-table-column property="unit" label="单位" width="120" />
      <el-table-column property="demandDate" label="需求日期" width="120" />
      <el-table-column property="explainNum" label="计划数量" width="120" />
      <el-table-column
        property="accomplishNum"
        label="实际生产数量"
        width="120"
      />
      <el-table-column
        property="explainStartDate"
        label="计划开工时间"
        width="120"
      />
      <el-table-column
        property="explainEndDate"
        label="计划完工时间"
        width="120"
      />
      <el-table-column
        property="practicalStartDate"
        label="实际开工时间"
        width="120"
      />
      <el-table-column
        property="practicalEndDate"
        label="实际完工时间"
        width="120"
      />
      <el-table-column property="state" label="状态" width="120" fixed="right">
        <template #default="ttt">
          <span v-if="ttt.row.state == 10" style="color: gray">待排产</span>
          <span v-if="ttt.row.states == 20" style="color: blueviolet"
            >未开始</span
          >
          <span v-if="ttt.row.state == 30" style="color: blue">进行中</span>
          <span v-if="ttt.row.state == 40" style="color: green">已完成</span>
          <span v-if="ttt.row.state == 50" style="color: orange">已暂停</span>
          <span v-if="ttt.row.state == 60" style="color: red">已关闭</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="scope">
          <el-button v-if="scope.row.state == 10" type="text" @click="Scheduling(scope.row.id)">排产</el-button>
          <el-button v-if="scope.row.state==20" type="text" @click="deleteRow(scope.$index, scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="demo-pagination-block">
      <el-pagination
        v-model:current-page="query.pageindex"
        v-model:page-size="query.pagesize"
        :page-sizes="[5, 10, 15, 20]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script>
import { ref, reactive } from "vue";
import { ElTable } from "element-plus";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import { ProductGet,GetProductWorkModelsFile } from "../../api/ProductWork";
export default {
  setup() {
    const down = () => {
      GetProductWorkModelsFile().then((res) => {
        if (res) {
          const elink = document.createElement("a");
          elink.download = "工单信息.xlsx";
          elink.style.display = "none";
          const blob = new Blob([res], { type: "application/x-msdownload" });
          elink.href = URL.createObjectURL(blob);
          document.body.appendChild(elink);
          elink.click();
          document.body.removeChild(elink);
        } else {
          this.$message.error("导出异常请联系管理员");
        }
      });
      //console.log(res)
    };
    //分页查询
    const query = reactive({
      pageindex: 1,
      pagesize: 10,
      productName:"",
      relevanceExplain:""
    });
    // 分页导航
    const handleSizeChange = (val) => {
      query.pagesize = val;
      getData();
    };
    // 分页导航
    const handleCurrentChange = (val) => {
      query.pageindex = val;
      getData();
    };
    //列表
    const tableData = ref([]);
    const totalCount = ref(0);
    // 获取表格数据
    const getData = () => {
      ProductGet(query).then((res) => {
        tableData.value = res.result.items;
        totalCount.value = res.result.totalCount || 50;
      });
    };
    getData();
    const hendleSerch=()=>{
      query.productName=formInline.productName;
      query.relevanceExplain=formInline.relevanceExplain;
      getData();
    };
    //查询条件
    const formInline = reactive({});
    //跳转
    const router = useRouter();
    //点击排产Scheduling跳转
    const Scheduling = (id) => {
      router.push({ path: "/SchedulingWork", query: { id: id } });
    };
    return {
      getData,
      query,
      tableData,
      totalCount,
      Scheduling,
      formInline,
      handleSizeChange,
      handleCurrentChange,
      hendleSerch,
      down,//工单导出
    };
  },
};
</script>
  